<template>
  <my-window :title="title" :modal="modal" :wrapper-closable="true" :modal-append-to-body="modalAppendToBody"
    :visible.sync="visible" destroy-on-close size="100%"
    drawer-body-style="padding:0px;height: calc(100% - 61px);" :before-close="onCancel" @opened="onSearch">
    <my-container v-loading="pageLoading" style="height: 500px;">
      <!--查询-->
      <template #header>
        <el-form class="ad-form-query" :inline="true" @submit.native.prevent>
          <el-form-item>
            <my-search :fields="fields" @click="onSearch" />
          </el-form-item>
        </el-form>
      </template>

      <!--列表-->
      <el-table v-loading="listLoading" :data="data" :highlight-current-row="!multiple" height="'100%'"
        style="width: 100%;height:100%;" @current-change="onCurrentChange" @row-dblclick="onSure"
        @selection-change="onSelectionChange">
        <el-table-column v-if="multiple" type="selection" width="50" />
        <el-table-column prop="code" label="工号" width />
        <el-table-column prop="name" label="员工姓名" width />
      </el-table>

      <!--分页-->
      <template #footer>
        <my-pagination ref="pager" :total="total" @get-page="getData" />
      </template>
    </my-container>
    <template #footer>
      <el-button @click.native="onCancel">取消</el-button>
      <el-button type="primary" @click="onSure">确定</el-button>
    </template>
  </my-window>
</template>

<script>
  import {
    formatTime
  } from '@/utils'
  import {
    getEmployeeListPage
  } from '@/api/personnel/employee'
  import MyContainer from '@/components/my-container'
  import MyWindow from '@/components/my-window'
  import MySearch from '@/components/my-search'

  export default {
    name: 'MySelectEmployee',
    components: {
      MyContainer,
      MyWindow,
      MySearch
    },
    props: {
      title: {
        type: String,
        default: '选择员工'
      },
      visible: {
        type: Boolean,
        default: false
      },
      form: {
        type: String,
        default: ''
      },
      multiple: {
        type: Boolean,
        default: false
      },
      modal: {
        type: Boolean,
        default: false
      },
      modalAppendToBody: {
        type: Boolean,
        default: false
      },
      // 过滤条件
      filterGroups: {
        type: Object,
        default: null
      },
    },
    data() {
      return {
        // 高级查询字段
        fields: [{
            value: 'name',
            label: '姓名',
            operator: 'Contain',
            default: true
          },
          {
            value: 'nickName',
            label: '昵称',
            type: 'string'
          },
          {
            value: 'entryTime',
            label: '入职时间',
            type: 'date',
            operator: 'daterange',
            config: {
              type: 'daterange',
              format: 'yyyy-MM-dd',
              valueFormat: 'yyyy-MM-dd'
            }
          },
          {
            value: 'createdTime',
            label: '创建时间',
            type: 'date',
            operator: 'daterange',
            config: {
              type: 'daterange',
              format: 'yyyy-MM-dd',
              valueFormat: 'yyyy-MM-dd'
            }
          }
        ],
        dynamicFilter: {
          Groups: []
        },

        data: [],
        total: 0,
        listLoading: false,
        pageLoading: false,
        currentRow: null,
        sels: []
      }
    },
    methods: {
      // 取消
      onCancel() {
        this.$emit('update:visible', false)
        this.$emit('cancel')
      },
      // 确定
      onSure() {
        this.$emit('click', this.form, this.multiple ? this.sels : this.currentRow)
      },
      onSearch(dynamicFilter) {
        this.$refs.pager.setPage(1)
        this.dynamicFilter.Groups = [];
        if (this.filterGroups) {
          this.dynamicFilter.Groups.push(this.filterGroups)
        }
        if (dynamicFilter && dynamicFilter.Condition != null) {
          this.dynamicFilter.Groups.push({
            Condition: dynamicFilter.Condition
          })
        }
        this.getData()
      },
      onCurrentChange(row) {
        this.currentRow = row
      },
      onSelectionChange(sels) {
        this.sels = sels
      },
      formatCreatedTime: function(row, column, time) {
        return formatTime(time, 'YYYY-MM-DD HH:mm')
      },
      // 获取数据
      async getData() {
        var pager = this.$refs.pager.getPager()
        const params = {
          ...pager,
          dynamicFilter: this.dynamicFilter
        }
        this.listLoading = true
        const res = await getEmployeeListPage(params)
        this.listLoading = false

        if (!res?.success) {
          return
        }

        this.total = res.data.total
        this.data = res.data.list
      }
    }
  }
</script>
